<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
	<meta charset="UTF-8">
	<title>task6</title>
	<link rel="stylesheet" href="./css/task6.css">
</head>
<body>
	<div class="wrap">
		<div class="main">
			<div class="header">
				<div class="logo"><p>ife.baidu.com</p></div>
				<div class="date"><p>2016.03</p></div>
			</div>
			<div class="section section1">
				<div class="banner">
					<div class="mask-right"></div>
					<div class="mask-left"></div>
					<img src="./images/task_1_6_1_03.png" alt="banner">				
				</div>
				<div class="banner-info">
					<h2>About <br>Technology</h2>
					<h3>About technologe about technoge<br>about technology</h3>
					<h1>700</h1>
					<h4>3.2</h4>
					<h5><span>css</span><br>csssscccsssccsssc</h5>
				</div>
			</div>
			<div class="section section2">
				<div class="what article">
					<h3>What</h3>
					<p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
				</div>
				<div class="when article">
					<h3>When</h3>
					<p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
				</div>
				<div class="how article">
					<h3>How</h3>
					<p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
					<div class="percent">
						<p>What-------- <span>40%</span></p>
						<p>What-------- <span>30%</span></p>
						<p>What-------- <span>30%</span></p>
					</div>
				</div>
			</div>
			<div class="section section3">
				<div class="fe-technologe-left">
					<div class="fe-header">
						<p><span class="yellow">THE</span>TECHNOLOGE</p>
						<p><span class="front">OF FRONT</span> </p>
						<p><span class="blue">前端技术领域</span></p>
					</div>
					<div class="fe-body">
						<div class="float"></div>
						<img src="./images/task_1_6_1_11.png" alt="fe-technoligy">
						<p><span class="yellow">前</span>端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前</p>
						<p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前</p>
						<p>端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
					</div>					
				</div>
				<div class="fe-technologe-right">
					<div class="banner">
						<div class="mask"><p><span>前端技术</span>前端技术前端技术</p></div>
						<img src="./images/task_1_6_1_07.png" alt="fe-technoligy">
					</div>
							
					<div class="hello-world">
						<p><i class="triangle"></i> 前端前端前端前端前端前端 ....................<span>前端</span></p>
						<p><i class="triangle"></i> 前端前端前端前端前端前端 ....................<span>前端</span></p>
						<p><i class="triangle"></i> 前端前端前端前端前端前端 ....................<span>前端</span></p>
						<div class="hello-world-left">
							<h1>0</h1>
							<h3><span>ONE TWO <br>THREE FORE FIVE</span>hello world hello world <br>hello world</h3>
						</div>
						<div class="hello-world-right">
							
							<p><span>"</span>world hello world hello world hello world hello world hello world hello world hello world  <span>"</span></p>
							
						</div>
					</div>		
				</div>
			</div>
			<div class="footer">
				<p>ife.baidu.com</p>
			</div>
		</div>		
	</div>
</body>
</html>